<template>
	<div class="subscribe_area">
		<myheader :type_title="type_title" :title="title"></myheader>
		<div class="title">请设置期望的价格面积范围</div>
		<div class="info">
			<div class="area">
				<p>面积</p>
				<input type="text" @blur.prevent="s1" @keyup="handleInput($event)" v-model="svval" /> —— <input type="text" @blur.prevent="s2" @keyup="handleInput1($event)" v-model="svval1"/> m²
				<p class="error" v-if="flag1">{{errors}}</p>
			</div>
			<div class="money">
				<p>价格</p>
				<input type="text" @blur.prevent="m1" @keyup="handleInput2($event)" v-model="svval2"  /> —— <input type="text" @blur.prevent="m2" @keyup="handleInput3($event)" v-model="svval3"  /> 万元/m²
				<p class="error" v-if="flag2">{{errors}}</p>
			</div>
		</div>
	</div>
</template>

<script>
	import myheader from '@/components/user/myheader'
	export default {
		name: "subscribe_area",
		data() {
			return {
				svval: "",
				svval1:"",
				svval2: "",
				svval3:"",
				flag1: false,
				flag2:false,
				title: "创建订阅条件",
				type_title: "noright",
				errors: "只能输入数字！",
			}
		},
		methods: {
			handleInput(e) {
				if (this.svval != e.target.value.replace("/[^\d]/g", '')) {
					this.flag1 = true;
					setTimeout(() => {
						this.flag1 = false;
					}, 2000)
				} else {
					this.flag1 = false;
				}
			},
			handleInput1(e) {
				if (this.svval1 != e.target.value.replace("/[^\d]/g", '')) {
					this.flag1 = true;
					setTimeout(() => {
						this.flag1 = false;
					}, 2000)
				} else {
					this.flag1 = false;
				}
			},
			handleInput2(e) {
				if (this.svval2 != e.target.value.replace("/[^\d]/g", '')) {
					this.flag2 = true;
					setTimeout(() => {
						this.flag2 = false;
					}, 2000)
				} else {
					this.flag2 = false;
				}
			},
			handleInput3(e) {
				if (this.svval3 != e.target.value.replace("/[^\d]/g", '')) {
					this.flag2 = true;
					setTimeout(() => {
						this.flag2 = false;
					}, 2000)
				} else {
					this.flag2 = false;
				}
			},
			s1(){				
				//保存面积1
				if(this.svval != ""){
					localStorage.setItem("svval1",this.svval);
				}
			},
			s2(){				
				//保存面积2
				if(this.svval1 != ""){
					localStorage.setItem("svval2",this.svval1);
				}
			},
			m1(){
				//保存价格1
				if(this.svval1 != ""){
					localStorage.setItem("money1",this.svval2);
				}				
			},
			m2(){
				//保存价格2
				if(this.svval1 != ""){
					localStorage.setItem("money2",this.svval3);
				}				
			}
			
		},
		components: {
			myheader
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.subscribe_area {
		width: 100%;
		height: auto;
		background: #F1F1F1;
	}
	
	.area .error {
		font-size: 0.13rem;
		color: red;
		left: 0.3rem;
		position: absolute;
	}
	
	.money .error {
		font-size: 0.13rem;
		color: red;
		left: 0.3rem;
		position: absolute;
	}
	
	.title {
		width: 100%;
		height: 0.7rem;
		line-height: 0.7rem;
		color: #999999;
		padding: 0 0.3rem;
		box-sizing: border-box;
		margin-top: 0.1rem;
		margin-bottom: 0.1rem;
		font-size: 0.3rem;
		background: white;
	}
	
	.info {
		width: 100%;
		height: auto;
		background: white;
		padding: 0 0.3rem;
		box-sizing: border-box;
	}
	
	.info div {
		width: 100%;
		height: 2.4rem;
		color: #999;
		font-size: 0.2rem;
		line-height: 0.7rem;
		display: flex;
		flex-wrap: wrap;
		align-content: center;
	}
	
	.info p {
		width: 100%;
		height: 0.6rem;
		color: #333333;
		font-size: 0.3rem;
		line-height: 0.6rem;
		font-weight: bold;
	}
	
	.info input {
		width: 2.4rem;
		height: 0.7rem;
		border: 2px solid #F0F0F0;
		box-sizing: border-box;
		border-radius: 0.1rem;
		text-align: center;
		line-height: 0.7rem;
		color: #999999;
		font-size: 0.3rem;
	}
</style>